import './setting.scss'
import { useState } from 'react'
import { useStore } from '@renderer/store/useStore'
export default function Setting() {
  const [keys, setKeys] = useState<string[]>([])
  const config = useStore((state) => state.config)
  const setConfig = useStore((state) => state.setConfig)

  return (
    <main className="setting-page">
      <h1>软件配置</h1>
      <section>
        <h5>自定义显示/隐藏快捷键</h5>
        <input
          name="shortcut"
          type="text"
          defaultValue={config.shortcut}
          readOnly
          onKeyDown={(e) => {
            if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) {
              const code = e.code.replace(/Left|Right|Key|Digit/, '')
              console.log(keys, code, 28)
              // 避免多次添加同一个快捷键
              if (keys.includes(code)) return
              keys.push(code)
              setKeys(keys)
              if (code.match(/^(\w|Space)$/gi)) {
                e.currentTarget.value = keys.join('+')
                setKeys([])
                setConfig({ ...config, shortcut: e.currentTarget.value })
                window.api.shortcut(e.currentTarget.value)
              }
            }
          }}
        />
      </section>
      <section>
        <h5>数据库存放文件夹</h5>
        <input
          name="databaseDirectory"
          defaultValue={config.databaseDirectory}
          type="text"
          readOnly
          onClick={async (e: any) => {
            const path = await window.api.selectDatabaseDirectory()
            setConfig({ ...config, databaseDirectory: path })
            e.target.value = path
            window.api.setDatabaseDirectory(path)
            window.api.initTable()
          }}
        />
      </section>
    </main>
  )
}
